<template>
  <div class="orderDetail-box">
    <div class="header">
      <h5>订单详细信息</h5>
      <i class="iconfont icon-close" @click="close"></i>
    </div>
    <div id="pdfRef" class="content">
      <div class="content-top">
        <h3 class="content-top-h3">{{ rowDataDetail.type }}</h3>
      </div>
      <div class="content-second">
        <p>{{ rowDataDetail.deptName }}</p>
        <p>审批编号：000</p>
      </div>
      <div class="content-tabel">
        <table class="content-tabel-child" border="1px" cellspacing="0px">
          <tbody>
            <tr>
              <th class="g-w-4">申请人</th>
              <td class="g-w-3">{{ rowDataDetail.nickName }}</td>
              <th class="g-w-4">申请部门</th>
              <td class="g-w-3">{{ rowDataDetail.deptName }}</td>
            </tr>
            <tr>
              <th class="g-w-4">提交时间</th>
              <td class="g-w-3">{{ rowDataDetail.createTime }}</td>
              <th class="g-w-4">当前审批状态</th>
              <td class="g-w-3">{{ rowDataDetail.applyStatus }}</td>
            </tr>
            <tr>
              <th height="20px" colspan="4" class="g-w-1"></th>
            </tr>
            <tr>
              <th height="30px" colspan="4" class="g-w-2">申请内容</th>
            </tr>
            <template v-if="rowDataDetail.type === '经营性付款申请'">
              <tr>
                <th class="g-w-4">经营板块</th>
                <td class="g-w-3"></td>
                <th class="g-w-4">费用承担部门</th>
                <td class="g-w-3">{{ rowDataDetail.deptName }}</td>
              </tr>
              <tr>
                <th class="g-w-4">付款事由</th>
                <td colspan="3" class="g-w-3">
                  {{ rowDataDetail.reason }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">付款类别</th>
                <td class="g-w-3">{{ rowDataDetail.paymentCategory }}</td>
                <th class="g-w-4">费用类别</th>
                <td class="g-w-3">
                  {{ rowDataDetail.costCategory ? rowDataDetail.costCategory : '无' }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">采购性质</th>
                <td class="g-w-3">
                  {{ rowDataDetail.purchaseNature ? rowDataDetail.purchaseNature : '无' }}
                </td>
                <th class="g-w-4">付款金额</th>
                <td class="g-w-3">{{ rowDataDetail.money }} 元</td>
              </tr>
              <tr>
                <th class="g-w-4">付款方式</th>
                <td class="g-w-3">{{ rowDataDetail.paymentMethod }}</td>
                <th class="g-w-4">付款日期</th>
                <td class="g-w-3">{{ rowDataDetail.date }}</td>
              </tr>
              <tr>
                <th class="g-w-4">收款人全称</th>
                <td class="g-w-3">{{ rowDataDetail.payeeFullName }}</td>
                <th class="g-w-4">实际支付日期</th>
                <td class="g-w-3">{{ rowDataDetail.date2 }}</td>
              </tr>
              <tr>
                <th class="g-w-4">开户行</th>
                <td class="g-w-3">
                  {{ rowDataDetail.bankOfDeposit }}
                </td>
                <th class="g-w-4">银行账号</th>
                <td class="g-w-3">{{ rowDataDetail.bankAccount }}</td>
              </tr>
              <tr>
                <th class="g-w-4">备注说明</th>
                <td colspan="3" class="g-w-3">
                  {{ rowDataDetail.remark }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">关联申请单</th>
                <td class="g-w-3">{{ rowDataDetail.applyID || '无' }}</td>
                <th class="g-w-4">附件</th>
                <td class="g-w-3">
                  <img
                    :src="item"
                    v-for="item in JSON.parse(rowDataDetail.attchment)"
                    :key="item"
                    @tap="previewImageFn(item)"
                  />
                </td>
              </tr>
            </template>
            <template v-if="rowDataDetail.type === '非经营性付款申请'">
              <tr>
                <th class="g-w-4">经营板块</th>
                <td class="g-w-3"></td>
                <th class="g-w-4">费用承担部门</th>
                <td class="g-w-3">{{ rowDataDetail.deptName }}</td>
              </tr>
              <tr>
                <th class="g-w-4">付款事由</th>
                <td colspan="3" class="g-w-3">
                  {{ rowDataDetail.reason }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">费用类别</th>
                <td class="g-w-3">
                  {{ rowDataDetail.costCategory ? rowDataDetail.costCategory : '无' }}
                </td>
                <th class="g-w-4">付款金额</th>
                <td class="g-w-3">{{ rowDataDetail.money }} 元</td>
              </tr>
              <tr>
                <th class="g-w-4">付款方式</th>
                <td class="g-w-3">{{ rowDataDetail.paymentMethod }}</td>
                <th class="g-w-4">付款日期</th>
                <td class="g-w-3">{{ rowDataDetail.date }}</td>
              </tr>
              <tr>
                <th class="g-w-4">收款人全称</th>
                <td class="g-w-3">{{ rowDataDetail.payeeFullName }}</td>
                <th class="g-w-4">实际支付日期</th>
                <td class="g-w-3">{{ rowDataDetail.date2 }}</td>
              </tr>
              <tr>
                <th class="g-w-4">开户行</th>
                <td class="g-w-3">
                  {{ rowDataDetail.bankOfDeposit }}
                </td>
                <th class="g-w-4">银行账号</th>
                <td class="g-w-3">{{ rowDataDetail.bankAccount }}</td>
              </tr>
              <tr>
                <th class="g-w-4">备注说明</th>
                <td colspan="3" class="g-w-3">
                  {{ rowDataDetail.remark }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">附件</th>
                <td class="g-w-3" colspan="3">
                  <img
                    :src="item"
                    v-for="item in JSON.parse(rowDataDetail.attchment)"
                    :key="item"
                    @tap="previewImageFn(item)"
                  />
                </td>
              </tr>
            </template>
            <template v-if="rowDataDetail.type === '备用金申请'">
              <!--              <tr>-->
              <!--                <th class="g-w-4">经营板块</th>-->
              <!--                <td class="g-w-3"></td>-->
              <!--              </tr>-->
              <tr>
                <th class="g-w-4">申请事由</th>
                <td colspan="3" class="g-w-3">
                  {{ rowDataDetail.reason }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">申请金额</th>
                <td class="g-w-3">{{ rowDataDetail.money }} 元</td>
              </tr>
              <tr>
                <th class="g-w-4">使用日期</th>
                <td class="g-w-3">{{ rowDataDetail.date }}</td>
                <th class="g-w-4">归还日期</th>
                <td class="g-w-3">{{ rowDataDetail.date2 }}</td>
              </tr>
              <tr>
                <th class="g-w-4">备注说明</th>
                <td colspan="3" class="g-w-3">
                  {{ rowDataDetail.remark }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">附件</th>
                <td class="g-w-3" colspan="3">
                  <img
                    :src="item"
                    v-for="item in JSON.parse(rowDataDetail.attchment)"
                    :key="item"
                    @tap="previewImageFn(item)"
                  />
                </td>
              </tr>
            </template>
            <template v-if="rowDataDetail.type === '文旅运营专项付款申请'">
              <tr>
                <th class="g-w-4">经营板块</th>
                <td class="g-w-3"></td>
                <th class="g-w-4">费用承担部门</th>
                <td class="g-w-3">{{ rowDataDetail.deptName }}</td>
              </tr>
              <tr>
                <th class="g-w-4">付款事由</th>
                <td colspan="3" class="g-w-3">
                  {{ rowDataDetail.reason }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">付款金额</th>
                <td class="g-w-3">{{ rowDataDetail.money }} 元</td>
                <th class="g-w-4">费用类别</th>
                <td class="g-w-3">
                  {{ rowDataDetail.costCategory ? rowDataDetail.costCategory : '无' }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">付款方式</th>
                <td class="g-w-3">{{ rowDataDetail.paymentMethod }}</td>
                <th class="g-w-4">付款日期</th>
                <td class="g-w-3">{{ rowDataDetail.date }}</td>
              </tr>
              <tr>
                <th class="g-w-4">收款人全称</th>
                <td class="g-w-3">{{ rowDataDetail.payeeFullName }}</td>
                <th class="g-w-4">实际支付日期</th>
                <td class="g-w-3">{{ rowDataDetail.date2 }}</td>
              </tr>
              <tr>
                <th class="g-w-4">开户行</th>
                <td class="g-w-3">
                  {{ rowDataDetail.bankOfDeposit }}
                </td>
                <th class="g-w-4">银行账号</th>
                <td class="g-w-3">{{ rowDataDetail.bankAccount }}</td>
              </tr>
              <tr>
                <th class="g-w-4">备注说明</th>
                <td colspan="3" class="g-w-3">
                  {{ rowDataDetail.remark }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">关联申请单</th>
                <td class="g-w-3">{{ rowDataDetail.applyID || '无' }}</td>
                <th class="g-w-4">附件</th>
                <td class="g-w-3">
                  <img
                    :src="item"
                    v-for="item in JSON.parse(rowDataDetail.attchment)"
                    :key="item"
                    @tap="previewImageFn(item)"
                  />
                </td>
              </tr>
            </template>
            <template v-if="rowDataDetail.type === '业务招待报备申请'">
              <tr>
                <th class="g-w-4">付款事由</th>
                <td colspan="3" class="g-w-3">
                  {{ rowDataDetail.reason }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">关联工单</th>
                <td class="g-w-3">{{ rowDataDetail.orderId }}</td>
                <th class="g-w-4">招待日期</th>
                <td class="g-w-3">
                  {{ rowDataDetail.date }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">招待对象</th>
                <td class="g-w-3">{{ rowDataDetail.serviceObject }}</td>
                <th class="g-w-4">招待预算</th>
                <td class="g-w-3">{{ rowDataDetail.money }} 元</td>
              </tr>
              <tr>
                <th class="g-w-4">陪同人员</th>
                <td colspan="3" class="g-w-3">
                  <span v-for="item in JSON.parse(rowDataDetail.personnel)">{{
                    item.nickName + ','
                  }}</span>
                </td>
              </tr>
              <tr>
                <th class="g-w-4">关联申请单</th>
                <td class="g-w-3">{{ rowDataDetail.applyID || '无' }}</td>
                <th class="g-w-4">附件</th>
                <td class="g-w-3">
                  <img
                    :src="item"
                    v-for="item in JSON.parse(rowDataDetail.attchment)"
                    :key="item"
                    @tap="previewImageFn(item)"
                  />
                </td>
              </tr>
            </template>
            <template v-if="rowDataDetail.type === '采购申请'">
              <tr>
                <th class="g-w-4">申请事由</th>
                <td colspan="3" class="g-w-3">
                  {{ rowDataDetail.reason }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">采购类型</th>
                <td class="g-w-3">{{ rowDataDetail.purchaseNature }}</td>
                <th class="g-w-4">期望交付日期</th>
                <td class="g-w-3">
                  {{ rowDataDetail.date }}
                </td>
              </tr>

              <template
                v-for="(item1, index1) in JSON.parse(rowDataDetail.details)"
                :key="index"
                class="detail-itemRequisition"
              >
                <tr>
                  <th height="30px" colspan="4" class="g-w-2">采购明细{{ index1 + 1 }}</th>
                </tr>
                <tr>
                  <th class="g-w-4">物品名称</th>
                  <td class="g-w-3">{{ item1.goodsName }}</td>
                  <th class="g-w-4">型号或规格</th>
                  <td class="g-w-3">
                    {{ item1.goodsModel }}
                  </td>
                </tr>
                <tr>
                  <th class="g-w-4">物品数量</th>
                  <td class="g-w-3">{{ item1.goodsNumber }}</td>
                  <th class="g-w-4">物品单位</th>
                  <td class="g-w-3">
                    {{ item1.goodsUnit }}
                  </td>
                </tr>
                <tr>
                  <th class="g-w-4">物品单价</th>
                  <td class="g-w-3">{{ item1.goodsUnitPrice }}</td>
                  <th class="g-w-4">物品金额</th>
                  <td class="g-w-3">{{ item1.goodsMoney }}元</td>
                </tr>
                <tr>
                  <th class="g-w-4">采购用途</th>
                  <td class="g-w-3" colspan="3">{{ item1.goodsPurpose }}</td>
                </tr>
              </template>
              <tr>
                <th class="g-w-4">备注说明</th>
                <td colspan="3" class="g-w-3">
                  {{ rowDataDetail.remark || '无' }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">采购总金额</th>
                <td class="g-w-3">{{ rowDataDetail.money }}元</td>
                <th class="g-w-4">附件</th>
                <td class="g-w-3">
                  <img
                    :src="item"
                    v-for="item in JSON.parse(rowDataDetail.attchment)"
                    :key="item"
                    @tap="previewImageFn(item)"
                  />
                </td>
              </tr>
            </template>
            <template v-if="rowDataDetail.type === '货品抵账申请'">
              <tr>
                <th class="g-w-4">抵账客户工单</th>
                <td class="g-w-3">
                  {{ rowDataDetail.orderId }}
                </td>
                <th class="g-w-4">采购类型</th>
                <td class="g-w-3">
                  {{ rowDataDetail.purchaseNature }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">是否在合同约定抵货额度范围内</th>
                <td class="g-w-3">{{ rowDataDetail.isWithin }}</td>
                <th class="g-w-4">抵货日期</th>
                <td class="g-w-3">
                  {{ rowDataDetail.date }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">货品用途</th>
                <td colspan="3" class="g-w-3">
                  {{ rowDataDetail.reason }}
                </td>
              </tr>

              <template
                v-for="(item1, index1) in JSON.parse(rowDataDetail.details)"
                :key="index"
                class="detail-itemRequisition"
              >
                <tr>
                  <th height="30px" colspan="4" class="g-w-2">采购明细{{ index1 + 1 }}</th>
                </tr>
                <tr>
                  <th class="g-w-4">货品名称</th>
                  <td class="g-w-3">{{ item1.goodsName }}</td>
                  <th class="g-w-4">数量</th>
                  <td class="g-w-3">
                    {{ item1.goodsNumber }}
                  </td>
                </tr>
                <tr>
                  <th class="g-w-4">单位</th>
                  <td class="g-w-3">{{ item1.goodsUnit }}</td>
                  <th class="g-w-4">单价</th>
                  <td class="g-w-3">
                    {{ item1.goodsUnitPrice }}
                  </td>
                </tr>
                <tr>
                  <th class="g-w-4">金额</th>
                  <td colspan="3" class="g-w-3">{{ item1.goodsMoney }}元</td>
                </tr>
              </template>
              <tr>
                <th class="g-w-4">备注说明</th>
                <td colspan="3" class="g-w-3">
                  {{ rowDataDetail.remark || '无' }}
                </td>
              </tr>
              <tr>
                <th class="g-w-4">总金额</th>
                <td class="g-w-3">{{ rowDataDetail.money }}元</td>
                <th class="g-w-4">附件</th>
                <td class="g-w-3">
                  <img
                    :src="item"
                    v-for="item in JSON.parse(rowDataDetail.attchment)"
                    :key="item"
                    @tap="previewImageFn(item)"
                  />
                </td>
              </tr>
            </template>
            <template v-if="rowDataDetail.type === '项目资金众筹申请列表'">
              <tr>
                <th class="g-w-4">众筹人员</th>
                <td class="g-w-3">
                  <span v-for="item in JSON.parse(rowDataDetail.personnel)">{{
                    item.nickName + ','
                  }}</span>
                </td>
                <th class="g-w-4">众筹金额</th>
                <td class="g-w-3">{{ rowDataDetail.money }}元</td>
              </tr>
              <tr>
                <th class="g-w-4">预计资金到账日期</th>
                <td class="g-w-3">
                  {{ rowDataDetail.date }}
                </td>
                <th class="g-w-4">附件</th>
                <td class="g-w-3">
                  <img
                    :src="item"
                    v-for="item in JSON.parse(rowDataDetail.attchment)"
                    :key="item"
                    @tap="previewImageFn(item)"
                  />
                </td>
              </tr>
            </template>
            <tr>
              <th height="20px" colspan="4" class="g-w-1"></th>
            </tr>
            <tr>
              <th height="30px" colspan="4" class="g-w-2">审批流程{{rowDataDetail.applyStatus? '-' : ''}}{{ rowDataDetail.applyStatus }}</th>
            </tr>
            <tr>
              <th class="g-w-5">审批节点</th>
              <th class="g-w-5">处理人</th>
              <th colspan="2" class="g-w-5">操作记录</th>
            </tr>
            <tr v-for="item in JSON.parse(rowDataDetail.approve)">
              <template v-if="item.data.length && item.name !== '抄送人'">
                <td v-for="person in item.data.filter((person) => person)">
                  {{ person.roles[0].roleName }}({{ item.name }})
                </td>
                <td v-for="person in item.data.filter((person) => person)">
                  {{ person.nickName }}
                </td>
                <td colspan="2">
                  {{ item.type
                  }}{{
                    item.name === '提交人'
                      ? '/' + rowDataDetail.createTime.slice(0, 16)
                      : item.date && item.name !== '提交人'
                        ? '/' + item.date.slice(0, 16)
                        : ''
                  }}
                </td>
              </template>
            </tr>
            <tr v-for="item in JSON.parse(rowDataDetail.approve)">
              <template v-if="item.name === '抄送人'">
                <td>抄送人</td>
                <td>
                  <span v-for="person in item.data.filter((person) => person)">
                    {{ person.nickName + ',' }}
                  </span>
                </td>
                <td colspan="2">已抄送{{ '/' + rowDataDetail.createTime.slice(0, 16) }}</td>
              </template>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="content-bottom">
      <div class="bottom-right">
        <p @click="handleExport">导出</p>
      </div>
      <div class="bottom-right">
        <p @click="close">关闭</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, defineEmits, defineProps } from 'vue'
import { getInfo } from '@/api/login.js'
import { htmlPdf } from '@/hook/htmlPDF.js'
const emit = defineEmits(['closePopUps'])
// 表格颜色
let bg = '#1947FF'
// rowDataDetail
const props = defineProps({
  // 订单详情信息
  rowDataDetail: {
    type: Object,
    default: [],
    required: true,
  },
  widthMy: {
    type: String,
  },
})
let deptId = ref(null)
const getInfoFnApi = async () => {
  let res = await getInfo()
  deptId.value = res.user.deptId
}
// 订单详情表格信息
let tableData = ref([
  {
    businessType: 'KT展板',
    customerType: '鼬',
    productionContent: '展板',
    width: '1',
    height: '2',
    quantityPerPiece: '2',
    totalQuantity: '2',
    unit: '个',
    unitPrice: '52',
    materialFee: '23',
    installationFee: '22',
    installationFee2: '22',
    urbanManagementFee: '20',
    totalOrderAmount: '2000',
    afterSalesService: '上门',
  },
])
// 表格外协商
let outsourcingTable = ref([
  {
    outsourcingId: '00000000000',
    outsourcingName: '斯巴达',
    costCategory: '月结供应商',
  },
])
// 关闭当前框
const close = () => {
  emit('closePopUps', false)
}
//导出pdf格式
const handleExport = (name) => {
  var fileName = props.rowDataDetail.type + '-' + props.rowDataDetail.nickName + '-' + props.rowDataDetail.deptName
  + '/' +props.rowDataDetail.createTime
  const fileList = document.getElementsByClassName('pdfRef')
  htmlPdf(fileName, document.querySelector('#pdfRef'), fileList)
}
// 图片预览
const previewImageFn = (photoImg) => {
  console.log('previewImageFn')
}

onMounted(() => {
  getInfoFnApi()
})
</script>
<style scoped lang="scss">
.orderDetail-box {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #1947ff;
    border-radius: 4px 4px 0px 0px;
    padding: 0 30px;
    height: 40px;
    width: 100%;

    h5 {
      color: #fff;
      font-weight: 600;
    }

    .icon-close {
      border: 1px solid #666;
      color: #1947ff;
      background: #ffffff;
    }
  }

  .content {
    padding: 10px 10px 0 10px;
    color: #333333;

    .content-top {
    display: flex;
    align-items: center;
    justify-content: center;
      .content-top-h3 {
        text-align: center;
        font-weight: 600;
      }
      .content-top-p{
        font-weight: 600;
      }
    }

    .content-second {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .content-tabel {
      margin-top: 6px;
      .content-tabel-child {
        border: 1px solid rgb(0, 0, 0);
        border-image: none;
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        background-color: rgb(255, 255, 255);
      }
    }
  }
  .content-bottom {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    .bottom-right {
      margin: 20px 0 20px 10px;
      p {
        width: 58px;
        height: 28px;
        background: linear-gradient(180deg, #d8e0ff 0%, #ffffff 100%);
        box-shadow: 2px 3px 6px 1px rgba(0, 0, 0, 0.16);
        border-radius: 2px 2px 2px 2px;
        text-align: center;
        line-height: 28px;
        cursor: pointer;
      }
    }
  }
}
.g-w-4 {
  width: 10%;
  background-color: #eae3e3;
}
.g-w-3 {
  width: 20%;
}
.g-w-3 img {
  width: 50px;
  height: 50px;
  margin: 6px;
}
.g-w-2 {
  background-color: #eae3e3;
}
.g-w-5 {
  background-color: #eae3e3;
}
th {
  text-align: center;
  font-weight: 600;
  vertical-align: middle;
  font-family: '华文中宋';
}
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
</style>
